<style>

#survey-info li {
	height: 20px;
    width: 100%;
    color: #00557F;
    list-style: none;
}

#survey-info ul {
	padding: 0px 40px; 
	margin: 5px 0px;
}

#survey-info li:nth-child(odd) {
	background-color: #FFFFFF; 
}

#survey-info li:nth-child(even) { 
	background-color: #E1EEF4;
}

.answerValue {
	float: left;
	padding: 2px 0 2px 4px;
    width: 48%;
}

.editButton {
	float: right; 
	background-color: #54BD06;
    border-radius: 8px 8px 8px 8px;
    color: white !important;
    font-size: 12px;
    padding: 3px 10px;
    text-decoration: none;
}

.editButton:hover {
	opacity: 0.8;
}

.complaintName {
	float: left;
    color: #00557F;
    padding: 2px 0 2px 4px;
    width: 48%;
}

.syndromeTitleContainer {
	display: table;
	width: 100%;
}

.complaint-type-value {
	display: inline-block;
	border: 1px solid white;
	border-radius: 2px;
	background: white;
	color: #2191C0;
	font-family: 'Helvetica','Arial','Sans' !important;
    font-size: 12px;
    margin: 0 0 0 10px;
    padding: 0 5px;
}

.hidden-complaint-type-value {
	display: none;
}
</style>

<script>

$(document).ready(function() {
	$(".complaintTypeName").each(function(){
		$result = $(this).find(".complaint-type-value");
		var answerSum = 0;
		var maxVal = 0;
		$(this).next().children().each(function(){
			var answerValueText = $(this).find(".answerValue").text();
			answerSum = answerSum + parseFloat(answerValueText);
			if (answerValueText == '1') {
				$(this).find(".answerValue").css('color', '#00FF00').css('font-weight', 'bold');
			} else if (answerValueText == '2') {
				$(this).find(".answerValue").css('color', '#FFCC00').css('font-weight', 'bold');
			} else if (answerValueText == '3') {
				$(this).find(".answerValue").css('color', '#FF0000').css('font-weight', 'bold');
			}
		});
		maxVal = parseInt($(this).find(".hidden-complaint-type-value").val()) * 3;
		var res = 0;
		if(maxVal != 0){
			res = parseFloat(answerSum) / parseFloat(maxVal) * 100;
		}
		$result.text(parseInt(res) + "%");
	});
	
});

</script>

<div id="survey-info">
	#{if contentMap != null}
		#{list items:contentMap.keySet(), as:'comaplaintType'}
			<div class="complaintTypeName">
				${comaplaintType.complaintTypeName}
				<div class="complaint-type-value"></div>
				<input class="hidden-complaint-type-value" type="text" value="${comaplaintType.complaints.size()}" >
			</div>
			<ul>
				#{list items:contentMap.get(comaplaintType), as:'surveyAnswer'}
					<li>
						<div class="complaintName">${surveyAnswer.complaint.complaintName}</div>
						<div class="answerValue">${surveyAnswer.answerValue}</div>
					</li>
				#{/list}
			</ul>
		#{/list}
	#{/if}
</div>